<!-- 数据点击展示弹窗 -->
<template>
  <ve-modal :model-value="modelValue" @close="close" closable hideFooter>
    <view class="data-modal">
      <view class="data-modal-title">
        <view
          class="data-modal-title-text link-text item-center"
          :class="{ 'disabled-text': currentIndex <= 0 }"
          @click="handleClick('prev')"
        >
          <ve-icon name="arrow_left_1" size="26" />前一天
        </view>
        <view class="data-modal-title-text">{{ list.date }}</view>
        <view
          class="data-modal-title-text link-text item-center"
          :class="{ 'disabled-text': currentIndex >= data.length - 1 }"
          @click="handleClick('next')"
        >
          后一天<ve-icon name="arrow_right_1" size="26" />
        </view>
      </view>
      <scroll-view scroll-y class="data-modal-content">
        <ve-cell-val
          label="总收入"
          v-if="type == 'shortOrderProfitStatistics' || (type == 'shortOrderFeeProfitStatistics' && orderFeeQueryType == 11)"
          unit="元"
          priceAlign="right"
          :value="formatNumber(list.totalAmount)"
        />
        <ve-line />
        <ve-cell-val label="总订单数" v-if="type == 'shortOrderProfitStatistics'" unit="单" priceAlign="right" :value="list.count || 0" />
        <ve-line />
        <ve-line />
        <view class="data-modal-content-card">
          <card :title="item.name" v-for="item in list.infoList" :key="item.id">
            <CardCell label="订单数" :value="item.count" unit="单" v-if="type == 'shortOrderProfitStatistics'" />
            <CardCell :label="type == 'shortOrderProfitStatistics' ? '收入' : '费用统计'" :value="item.totalAmount" />
          </card>
        </view>
      </scroll-view>
    </view>
  </ve-modal>
</template>
<script setup>
  import { ref } from 'vue'
  import card from './card/index.vue'
  import CardCell from './card/card-cell.vue'
  import { formatNumber } from '@/utils'
  const props = defineProps({
    data: Object,
    index: Number,
    type: String,
    orderFeeQueryType: [Number, String],
  })
  const modelValue = ref(false)
  const currentIndex = ref(0)
  const list = ref({})
  const close = () => {
    list.value = {}
    currentIndex.value = 0
    modelValue.value = false
  }
  const open = () => {
    console.log('open', props.data)
    console.log('open', props.index)
    if (props.data && props.data.length) {
      currentIndex.value = props.index
      list.value = props.data[props.index]
      setTimeout(() => {
        modelValue.value = true
      }, 20)
    } else {
      console.log('数据为空')
    }
  }
  const handleClick = (type) => {
    let num = Number(currentIndex.value)
    if (type == 'prev') {
      list.value = props.data[num - 1]
      currentIndex.value = num - 1
    } else if (type == 'next') {
      currentIndex.value = num + 1
      if (currentIndex.value <= props.data.length - 1) {
        list.value = props.data[num + 1]
      } else {
        currentIndex.value = props.data.length - 1
      }
    }
  }
  defineExpose({
    open,
  })
</script>
<style lang="scss" scoped>
  .flex-col {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .flex-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .data-modal {
    &-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 32rpx;
      border-bottom: 1rpx solid #d8d8d8;
      &-text {
        font-size: 32rpx;
        font-weight: bold;
      }
    }
    &-content {
      overflow-y: auto;
      max-height: 60vh;
      :deep(.ve-cell-title) {
        font-weight: 400;
        font-size: 30rpx;
        color: #191c27;
      }
      :deep(.result) {
        font-weight: 600;
        font-size: 30rpx;
        color: #1890ff;
      }
      &-card {
        padding-bottom: 24rpx;
        margin-top: 24rpx;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24rpx;
        justify-content: space-between;
      }
    }
    :deep(.summary-card) {
      width: auto;
    }
  }
  .link-text {
    color: #1890ff;
    font-weight: 400;
  }
  .disabled-text {
    filter: grayscale(100%);
    pointer-events: none;
    cursor: not-allowed;
  }
  .item-center {
    display: flex;
    align-items: center;
  }
</style>
